<nz-card class="m-b-2">
  <div class="zdy-seach-wrap">
    <div nz-space class="seach-content">
      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">综合搜索</label>
        <div class="seach-control">
          <input nz-input placeholder="用户ID/手机号码/ID" [(ngModel)]="seachParams.no" />
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">兑换时间</label>
        <div class="seach-control">
          <nz-range-picker [(ngModel)]="exchangeDates" (ngModelChange)="onTimeChange($event)"></nz-range-picker>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">面值</label>
        <div class="seach-control">
          <nz-select
            nzAllowClear
            nzShowSearch
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="请选择面值"
            [(ngModel)]="faceValueSelected"
            (ngModelChange)="faceValueChange($event)"
          >
            <nz-option
              *ngFor="let option of faceValueOptions"
              [nzValue]="option.value"
              [nzLabel]="option.label">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <button nz-button nzType="primary" [nzLoading]="tableParams.tableLoading" class="m-r-8" (click)="seachData()">查询</button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <div class="face-card">
    <ul class="face-ul">
      <li
        *ngFor="let item of faceValueOptions"
      >
        <div class="card-wrap">
          <span class="card-bg" [ngStyle]="{'background': item.color}"></span>
          <span class="face-card">
            ¥ {{ item.label }}
          </span>
        </div>
        <span class="surplus-num">{{ item.surplus }}</span>
      </li>
    </ul>
  </div>

  <div class="pagination-wrap-position">
    <div class="table-wrap p-t-15">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableParams.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableParams.total"
        [nzPageIndex]="tableParams.page"
        [nzPageSize]="tableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center">卡号</th>
            <th nzAlign="center">用户ID</th>
            <th nzAlign="center">手机号码</th>
            <th nzAlign="center">面值</th>
            <th nzAlign="center">有效期</th>
            <th nzAlign="center">兑换时间</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of basicTable.data; let index = index;">
            <td nzAlign="center">{{ data.cardNum }}</td>
            <td nzAlign="center">{{ data.userId }}</td>
            <td nzAlign="center">{{ data.phone || '-' }}</td>
            <td nzAlign="center">{{ data.faceValue | number: '0.2-2' }}</td>
            <td nzAlign="center">{{ data.effectiveTime || '-' }}</td>
            <td nzAlign="center">{{ data.exchangeTime || '-' }}</td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
  </div>
</nz-card>